<template> 
  
    <h4 class="title_lv2">MessageBox 弹框提示</h4>
    <div class="statement">
      <ol>
        <li>支持html,无返回值</li>
        <li>支持html,有返回值callback</li>
      </ol>
    </div>
  
    <div>
      <el-button @click="openMsgBox">无返回值 “htmlMsg”</el-button>
      <el-button @click="openMsgBoxCall">有返回值 “htmlMsg”</el-button>
    </div>
  
    <div class="statement">
      <ol>
        <li>confirm弹窗,在页面中引入<span class="impTxt">“@/utils/messageUtils”</span>中的方法</li>
        <li>多次提示弹窗使用<span class="impTxt">“moreConfirm”</span></li>
        <li>删除可直接使用<span class="impTxt">“delConfimMsg”</span></li>
        <li>使用html替换msg信息<span class="impTxt">“htmlMsg”</span></li>
  
      </ol>
      <div>
        <el-button type="primary" @click="openMoreConfirmBox">多次 moreConfirm</el-button>
        <el-button type="warning" @click="openWarnConfirmBox">warning confirm Box</el-button>
        <el-button type="success" @click="opensuccessConfirmBox">success confirm Box</el-button>
        <el-button type="danger" @click="opendangerConfirmBox">danger confirm Box</el-button>
        <el-button type="danger" @click="opendelConfirmBox">删除 delConfimMsg</el-button>
        <br/>
        <el-button type="danger" @click="testPromise">测试promise</el-button>

  
      </div>
    </div>
    <!-- 页面代码 源码 -->
    <dropWrap key="ffs">
      <pre><code class="language-js">{{ msgBox }} </code></pre>
    </dropWrap>
    <!-- 页面代码 源码 -->
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted, nextTick } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { demoProps } from "@/stores/modules/merakDemo";
  import { 
    confirmWarningMsg,
    confirmSuccessMsg,
    confirmDangerMsg,
    moreConfirm,
    delConfimMsg,
    htmlMsg
  } from "@/utils/messageUtils";
  
  import Prism from "prismjs";
  import "../../prism.css";
  
  import dropWrap from "../../dropWrap.vue";
  /* 响应式变量 */
  
  const demoProp = demoProps();
  
  //变量 htm 用于存放 组件源码 code
 
  
  let msgBox = ref<string>(` 
    //可传参为：不传即为默认值
        interface baseMsg {
        title?: string;//提示标题
        msg: string;//提示信息
        showClose?: boolean;
        num?: number; //点击次数
        confirmTxt?: string; //确认文本
        cancelTxt?: string; //取消文本
        callback?: any;//返回方法
      }
  
  
  
    import {
 
    confirmWarningMsg,
    confirmSuccessMsg,
    confirmDangerMsg,
    moreConfirm,
    delConfimMsg,
    htmlMsg
  } from "@/utils/messageUtils";
 
  
   //confirm提示 confirmWarningMsg  confirmSuccessMsg confirmDangerMsg moreConfirm delConfimMsg  htmlMsg
    //多次提示 moreConfirm   
    
      moreConfirm({
        num:3,//提示次数
        //msg: "提示信息？？？？",
        msg: ["11111111111111提示信息？？？？","ceshiceschidhihfidhifhdsfsdfssd","333333333333333333333333333333"],
        callback: val => {
          console.log(val, "成功confirm还是失败cancel");
        }
      });
  
    //html文本 htmlMsg
      htmlMsg("<strong>proxy is <i>HTML</i> string</strong>");
  
    //confirm返回值提示信息
      confirmSuccessMsg({
        msg: "提示信息？？？？",
        callback: val => {
          console.log(val, "成功confirm还是失败cancel");
        }
      });
  
    //删除提示  delConfimMsg
      delConfimMsg({ 
        callback: val => {
          console.log(val, "成功还是失败。。。");
        }
      });
      `);
  
  /* 
      生命周期
      */
  onMounted(() => {
    nextTick(() => {
      Prism.highlightAll();
    });
  });
  
  
  
  const openMsgBox = () => {
    htmlMsg("<strong>proxy is <i>HTML</i> string</strong>");
  
    // ElMessageBox.alert(demoProp.title, "title", {
    //   confirmButtonText: "OK",
    //   callback: action => {
    //     console.log(action);
    //   }
    // });
  };
  
  const openMoreConfirmBox = () => {
 

    moreConfirm({
      num:3,
      msg: "提示信息？？？？",
      // msg: ["11111111111111提示信息？？？？","ceshiceschidhihfidhifhdsfsdfssd","333333333333333333333333333333"],
      callback: val => {
        console.log(val, "成功还是失败。。。");
      }
    });



  };
  const openMsgBoxCall = () => {
    htmlMsg({
      title: "有返回值title",
      msg: "<strong>proxy is <i>HTML</i> string</strong>",
      callback: (action: Action) => {
        console.log(action, "有返回值");
      }
    });
  };
  const openWarnConfirmBox = () => {
    confirmWarningMsg({
      msg: "提示信息？？？？",
      callback: val => {
        console.log(val, "成功还是失败。。。");
      }
    });
  };
  const opensuccessConfirmBox = () => {
    confirmSuccessMsg({
      msg: "提示信息？？？？",
      callback: val => {
        console.log(val, "成功还是失败。。。");
      }
    });
  };
  const opendangerConfirmBox = () => {
    confirmDangerMsg({
      title:"titletitle",
      msg: "提示信息？？？？",
      callback: val => {
        console.log(val, "成功还是失败。。。");
      }
    });
  };
  const opendelConfirmBox = () => {
    delConfimMsg({ 
      callback: val => {
        console.log(val, "成功还是失败。。。");
      }
    });
  };
  
  </script>
  <style lang="scss" scoped>
  .el-row::v-deep {
    margin-bottom: 20px;
  }
  .el-alert {
    margin-bottom: 20px;
  }
  .impTxt{
    color: var(--el-color-primary);
    padding: 0 5px;
  }
  </style>
  